// canvas-editor 相关API
import { ref, reactive } from "vue";

// 实现 icon 与 instance 的操作映射
function _iconClickHandle({ icon, value, reword }) {
  let instance = Reflect.get(window, "__instance__");
  if (!instance) return;

  console.log(icon, value);

  const iconHandleMap = {
    // 保存
    "icon-baocun": () => {},
    "icon-dayin": () => instance.command.executePrint(),
    // 历史记录
    "icon-lishi": () => {},
    "icon-chexiao": () => instance.command.executeUndo(),
    "icon-zhongzuo": () => instance.command.executeRedo(),
    // 格式刷
    "icon-geshishua": () => {},
    "icon-fuzhi": () => instance.command.executeCopy(),
    "icon-niantie": () => instance.command.executePaste(),
    "icon-jianqie": () => instance.command.executeCut(),
    "icon-zihaojia": () => instance.command.executeSizeAdd(),
    "icon-zihaojian": () => instance.command.executeSizeMinus(),
    "icon-cuti": () => instance.command.executeBold(),
    "icon-italic": () => instance.command.executeItalic(),
    "icon-zitixiahuaxian": () => instance.command.executeUnderline(),
    "icon-strikethrough": () => instance.command.executeStrikeout(),
    // 高亮
    "icon-icon_tuchuxianshi": () => {},
    // 字体颜色
    "icon-zitiyanse": () => {},
    // 主动搜索-输入框
    "icon-search": () => instance.command.executeSearch(value),
    // 查找上一处
    "icon-presearch": () => instance.command.executeSearchNavigatePre(),
    // 查找下一处
    "icon-nextsearch": () => instance.command.executeSearchNavigateNext(),
    // 替换
    "icon-replace": () => instance.command.executeReplace(reword),
    // 关闭查找
    "icon-search-close": () => instance.command.executeSearch(""),
  };
  iconHandleMap[icon] && iconHandleMap[icon]();
}

export const useEditor = () => {
  var instance = reactive(null);

  // 初始化数据源
  let data = reactive({
    header: [
      {
        value: "第一人民医院",
        size: 32,
        rowFlex: "center",
      },
      {
        value: "\n门诊病历",
        size: 18,
        rowFlex: "center",
      },
      {
        value: "\n",
        type: "separator",
        width: 554,
      },
    ],
    main: [
      {
        value: "",
        type: "title",
        valueList: [
          {
            value: "主诉：",
            size: 18,
            bold: true,
          },
        ],
        level: "first",
      },
      {
        value: "\n发热三天，咳嗽五天。",
        size: 16,
      },
      {
        value: "",
        type: "control",
        control: {
          conceptId: "1",
          type: "text",
          value: [],
          placeholder: "其他补充",
          prefix: "{",
          postfix: "}",
        },
      },
      {
        value: "\n",
        size: 16,
      },
      {
        value: "",
        type: "title",
        valueList: [
          {
            value: "现病史：",
            size: 18,
            bold: true,
          },
        ],
        level: "first",
      },
      {
        value:
          "\n患者于三天前无明显诱因，感冒后发现面部水肿，无皮疹，尿量减少，出现乏力，在外治疗无好转，现来我院就诊。\n",
        size: 16,
      },
      {
        value: "",
        type: "title",
        valueList: [
          {
            value: "既往史：",
            size: 18,
            bold: true,
          },
        ],
        level: "first",
      },
      {
        value: "\n有糖尿病10年，有高血压2年，有",
        size: 16,
      },
      {
        value: "传染性疾病",
        size: 16,
        color: "#FF0000",
      },
      {
        value: "1年。",
        size: 16,
      },
      {
        value: "",
        type: "control",
        control: {
          conceptId: "2",
          type: "select",
          value: [],
          code: null,
          placeholder: "有无",
          prefix: "{",
          postfix: "}",
          valueSets: [
            {
              value: "有",
              code: "98175",
            },
            {
              value: "无",
              code: "98176",
            },
            {
              value: "不详",
              code: "98177",
            },
          ],
        },
      },
      {
        value: "报告其他既往疾病。\n",
        size: 16,
      },
      {
        value: "",
        type: "title",
        valueList: [
          {
            value: "流行病史：",
            size: 18,
            bold: true,
          },
        ],
        level: "first",
      },
      {
        value: "\n否认14天内接触过",
        size: 16,
      },
      {
        value: "",
        type: "hyperlink",
        url: "https://hufe.club/canvas-editor",
        valueList: [
          {
            value: "新冠肺炎",
            size: 16,
            color: "#0000FF",
            underline: true,
          },
        ],
      },
      {
        value:
          "确诊患者、疑似患者、无症状感染者及其密切接触者；否认14天内去过以下场所：水产、肉类批发市场，农贸市场，集市，大型超市，夜市；否认14天内与以下场所工作人员密切接触：水产、肉类批发市场，农贸市场，集市，大型超市；否认14天内周围（如家庭、办公室）有2例以上聚集性发病；否认14天内接触过有发热或呼吸道症状的人员；否认14天内自身有发热或呼吸道症状；否认14天内接触过纳入隔离观察的人员及其他可能与新冠肺炎关联的情形；陪同家属无以上情况。\n",
        size: 16,
      },
      {
        value: "",
        type: "title",
        valueList: [
          {
            value: "体格检查：",
            size: 18,
            bold: true,
          },
        ],
        level: "first",
      },
      {
        value: "\nT：39.5℃",
        size: 16,
      },
      {
        value: "∆",
        type: "subscript",
        color: "#FF0000",
      },
      {
        value: "，P：80bpm，R：20次/分，BP：120/80mmHg；\n",
        size: 16,
      },
      {
        value: "",
        type: "title",
        valueList: [
          {
            value: "辅助检查：",
            size: 18,
            bold: true,
          },
        ],
        level: "first",
      },
      {
        value: "\n2020年6月10日，普放：",
        size: 16,
      },
      {
        value: "血细胞比容",
        highlight: "#F2F27F",
        groupIds: ["1"],
      },
      {
        value: "36.50%（偏低）40～50；单核细胞绝对值0.75*10",
        size: 16,
      },
      {
        value: "9",
        type: "superscript",
      },
      {
        value: "/L（偏高）参考值：0.1～0.6；\n",
        size: 16,
      },
      {
        value: "",
        type: "title",
        valueList: [
          {
            value: "门诊诊断：",
            size: 18,
            bold: true,
          },
        ],
        level: "first",
      },
      {
        value: "",
        type: "list",
        valueList: [
          {
            value: "高血压\n糖尿病\n病毒性感冒\n过敏性鼻炎\n过敏性鼻息肉",
          },
        ],
        listType: "ol",
      },
      {
        value: "",
        type: "title",
        valueList: [
          {
            value: "处置治疗：",
            size: 18,
            bold: true,
          },
        ],
        level: "first",
      },
      {
        value: "",
        type: "list",
        valueList: [
          {
            value:
              "超声引导下甲状腺细针穿刺术；\n乙型肝炎表面抗体测定；\n膜式病变细胞采集术、后颈皮下肤层；",
          },
        ],
        listType: "ol",
      },
      {
        value: "",
        type: "title",
        valueList: [
          {
            value: "电子签名：",
            size: 18,
            bold: true,
          },
        ],
        level: "first",
      },
      {
        value: "【",
        size: 16,
      },
      {
        value:
          "",
        type: "image",
        width: 89,
        height: 32,
      },
      {
        value: "】\n",
        size: 16,
      },
      {
        value: "",
        type: "title",
        valueList: [
          {
            value: "其他记录：",
            size: 18,
            bold: true,
          },
        ],
        level: "first",
      },
      {
        value: "",
        type: "table",
        trList: [
          {
            height: 42,
            tdList: [
              {
                colspan: 1,
                rowspan: 2,
                value: [
                  {
                    value: "1.",
                    size: 16,
                  },
                ],
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [
                  {
                    value: "2.",
                    size: 16,
                  },
                ],
              },
              {
                colspan: 2,
                rowspan: 1,
                value: [
                  {
                    value: "3.",
                    size: 16,
                  },
                ],
              },
            ],
            minHeight: 42,
          },
          {
            height: 42,
            tdList: [
              {
                colspan: 1,
                rowspan: 1,
                value: [
                  {
                    value: "4.",
                    size: 16,
                  },
                ],
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [
                  {
                    value: "5.",
                    size: 16,
                  },
                ],
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [
                  {
                    value: "6.",
                    size: 16,
                  },
                ],
              },
            ],
            minHeight: 42,
          },
          {
            height: 42,
            tdList: [
              {
                colspan: 1,
                rowspan: 1,
                value: [
                  {
                    value: "7.",
                    size: 16,
                  },
                ],
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [
                  {
                    value: "8.",
                    size: 16,
                  },
                ],
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [
                  {
                    value: "9.",
                    size: 16,
                  },
                ],
              },
              {
                colspan: 1,
                rowspan: 1,
                value: [
                  {
                    value: "10.",
                    size: 16,
                  },
                ],
              },
            ],
            minHeight: 42,
          },
        ],
        width: 520,
        height: 126,
        colgroup: [
          {
            width: 180,
          },
          {
            width: 80,
          },
          {
            width: 130,
          },
          {
            width: 130,
          },
        ],
      },
      {
        value: "是否同意以上内容：",
      },
      {
        value: "",
        type: "control",
        control: {
          conceptId: "3",
          type: "checkbox",
          code: "98175",
          value: [
            {
              value: "同意否定",
            },
          ],
          valueSets: [
            {
              value: "同意",
              code: "98175",
            },
            {
              value: "否定",
              code: "98176",
            },
          ],
        },
      },
      {
        value: "\n医学公式：",
      },
      {
        value: "{E_k} = hv - {W_0}",
        type: "latex",
        width: 102,
        height: 25,
      },
      {
        value: "\n签署日期：",
      },
      {
        value: "",
        type: "date",
        valueList: [
          {
            value: "2022-08-10 17:30:01",
          },
        ],
      },
      {
        value: "\n患者签名：",
      },
      {
        value: "",
        type: "control",
        control: {
          conceptId: "4",
          type: "text",
          value: [],
          placeholder: "",
          prefix: "‌",
          postfix: "‌",
          minWidth: 160,
          underline: true,
        },
      },
      {
        value: "\n",
      },
      {
        value: "",
        type: "tab",
      },
      {
        value: "EOF",
        size: 16,
      },
    ],
    footer: [
      {
        value: "canvas-editor",
        size: 12,
      },
    ],
  });

  // 配置项
  const options = reactive({
    margins: [100, 120, 100, 120], // 调整四个三角的页边距
    // 水印
    watermark: {
      data: "CANVAS-EDITOR",
      size: 120,
    },

    // canvas-editor 页脚分页显示格式
    pageNumber: {
      format: "第{pageNo}页/共{pageCount}页",
    },
    placeholder: {
      data: "请输入正文",
    },

    maskMargin: [60, 0, 30, 0], // 菜单栏高度60，底部工具栏30为遮盖层
  });

  // 菜单栏点击事件
  const iconClickHandle = (data) => _iconClickHandle(data);

  return { instance, data, options, iconClickHandle };
};
